import React, { Dispatch, SetStateAction } from "react";

/**
 * 播放器上下文
 */
interface PlayerCtxProps{
    videoIndex?: number;
    setVideoIndex?: Dispatch<SetStateAction<number>>;
}
export const PlayerCtx = React.createContext<PlayerCtxProps>({});


// import React, { useContext, useMemo } from 'react';

// import { MyContext } from './context-manager';
// 子组件通过优化渲染，useMemo 支持传入依赖项，当依赖不发生变化则不重新渲染
// export default (props = {}) => {
//     const { state, dispatch } = useContext(MyContext);
//     return useMemo(() => {
//         console.log('[Child] RE-RENDER');
//         return (
//             <div>
//                 <p>step is : {state.step}</p>
//                 <p>number is : {state.number}</p>
//                 <p>count is : {state.count}</p>
//                 <hr />
//                 <div>
//                     <button onClick={() => { dispatch({ type: 'stepInc' }) }}>step ++</button>
//                     <button onClick={() => { dispatch({ type: 'numberInc' }) }}>number ++</button>
//                     <button onClick={() => { dispatch({ type: 'count' }) }}>number + step</button>
//                 </div>
//             </div>
//         )
//     }, [state.count, state.number, state.step, dispatch]);
// }